<template>
  <div class="menu-mng">
    <Row :gutter="10">
      <!-- 菜单树 -->
      <Col :span="8">
        <Card dis-hover>
          <span class="detail-title">
            <Icon type="ios-menu"></Icon>
            菜单树:
          </span>
          <hr class="split"/>
          <Tree ref="tree"
                :data="treeData"
                :render="renderContent"></Tree>
        </Card>
      </Col>
      <!-- 信息栏 -->
      <Col :span="12">
        <Card dis-hover>
          <span class="detail-title">
            <Icon type="ios-paper"></Icon>
            菜单信息:
          </span>
          <hr class="split"/>
          <Row>
            <Col :span="4">
              <span class="detail-label">菜单编码:</span>
            </Col>
            <Col :span="6">
              <span class="detail-value">{{clickRow.menuCode}}</span>
            </Col>
            <Col :span="4">
              <span class="detail-label">菜单名称:</span>
            </Col>
            <Col :span="6">
              <span class="detail-value">{{clickRow.title}}</span>
            </Col>
          </Row>
          <Row>
            <Col :span="4">
              <span class="detail-label">上级菜单:</span>
            </Col>
            <Col :span="6">
              <span class="detail-value">{{clickRow.fatherCode}}</span>
            </Col>
            <Col :span="4">
              <span class="detail-label">根菜单:</span>
            </Col>
            <Col :span="6">
              <span class="detail-value">{{clickRow.rootCode}}</span>
            </Col>
          </Row>
          <Row :gutter="10">
            <Col :span="4">
              <span class="detail-label">深度:</span>
            </Col>
            <Col :span="6">
              <span class="detail-value">{{clickRow.deep}}</span>
            </Col>
            <Col :span="4">
              <span class="detail-label">序号:</span>
            </Col>
            <Col :span="6">
              <span class="detail-value">{{clickRow.seq}}</span>
            </Col>
          </Row>
          <Row>
            <Col :span="4">
              <span class="detail-label">请求url:</span>
            </Col>
            <Col :span="6">
              <span class="detail-value">{{clickRow.url}}</span>
            </Col>
            <Col :span="4">
              <span class="detail-label">视图路径:</span>
            </Col>
            <Col :span="6">
              <span class="detail-value">{{clickRow.viewPath}}</span>
            </Col>
          </Row>
          <Row>
            <Col :span="4">
              <span class="detail-label">图标:</span>
            </Col>
            <Col :span="6">
              <span class="detail-value">{{clickRow.icon}}</span>
            </Col>
            <Col :span="4">
              <span class="detail-label">状态:</span>
            </Col>
            <Col :span="6">
              <span class="detail-value">{{clickRow.state_str}}</span>
            </Col>
          </Row>
        </Card>
      </Col>
    </Row>
    <Add :visible.sync="addFormVisible" :init-form-data="addInfo" @on-ok="init"></Add>
    <Update :visible.sync="updateFormVisible" :init-form-data="clickRow" @on-ok="init"></Update>
  </div>
</template>

<script>
  import Add from "./add"
  import Update from "./update"
  import {deleteMenu, getMenuTree} from "@/api/sys/menu"
  import {getMenuStateDesc} from "@/enum/SysEnum"

  export default {
    name: "MenuMng",
    components: {Add, Update},
    data() {
      return {
        filterText: null,
        treeData: [],
        clickRow: null,
        addFormVisible: false,
        updateFormVisible: false,
        isAddRoot: false,
        addInfo: {}
      }
    },
    created() {
      this.init()
    },
    methods: {
      renderContent(h, {root, node, data}) {
        let renderContent1 = h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('span', data.title)
          ]),
          h('span', {
            style: {
              display: 'inline-block',
              float: 'right',
              marginRight: '16px'
            }
          }, [
            h('Button', {
              props: {
                type: 'default',
                size: 'small',
                icon: 'md-add',
                type: 'primary'
              },
              style: {
                width: '24px'
              },
              on: {
                click: () => this.showAdd(data)

              }
            })
          ])
        ])

        let renderContent2 = h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('Button', {
              props: {
                type: 'text',
                size: 'small'
              },
              on: {
                click: () => {
                  this.selectOne(data)
                }
              }
            }, data.title)
          ]),
          h('span', {
            style: {
              display: 'inline-block',
              float: 'right',
              marginRight: '16px'
            }
          }, [
            h('Button', {
              props: {
                type: 'default',
                size: 'small',
                icon: 'md-add',
                type: 'primary'
              },
              style: {
                marginRight: '8px'
              },
              on: {
                click: () => this.showAdd(data)
              }
            }),
            h('Button', {
              props: {
                type: 'default',
                size: 'small',
                icon: 'md-create',
                type: 'primary'
              },
              style: {
                marginRight: '8px'
              },
              on: {
                click: () => this.showUpdate(data)
              }
            }),
            h('Button', {
              props: {
                type: 'default',
                size: 'small',
                icon: 'md-remove',
                type: 'primary'
              },
              on: {
                click: () => this.delete(data)
              }
            })
          ])
        ])

        let renderContent3 = h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('Button', {
              props: {
                type: 'text',
                size: 'small'
              },
              on: {
                click: () => {
                  this.selectOne(data)
                }
              }
            }, data.title)
          ]),
          h('span', {
            style: {
              display: 'inline-block',
              float: 'right',
              marginRight: '16px'
            }
          }, [
            h('Button', {
              props: {
                type: 'default',
                size: 'small',
                icon: 'md-create',
                type: 'primary'
              },
              style: {
                marginRight: '8px'
              },
              on: {
                click: () => this.showUpdate(data)
              }
            }),
            h('Button', {
              props: {
                type: 'default',
                size: 'small',
                icon: 'md-remove',
                type: 'primary'
              },
              on: {
                click: () => this.delete(data)
              }
            })
          ])
        ])

        if (data.deep == -1) {
          return renderContent1
        } else if (data.deep == 0) {
          return renderContent2
        } else if (data.deep == 1) {
          return renderContent3
        }
      },
      init() {
        this.clickRow = {}
        this.addFormVisible = false
        this.updateFormVisible = false
        this.treeData = [{
          "title": config.appName,
          "id": "0",
          "deep": "-1",
          "expand": true,
          "disabled": true,
          "selected": false,
          "children": [],
        }]
        this.query()
      },
      query() {
        let self = this
        self.treeData[0].children = []
        let params = {}
        getMenuTree(params)
          .then(response => {
            let menuArray = response.data.data
            if (menuArray != null && menuArray.length > 0) {
              for (let index = 0; index < menuArray.length; index++) {
                const element = menuArray[index];
                if (element.deep == 0) {
                  let node = {}
                  node.id = element.id
                  node.menuCode = element.menuCode
                  node.title = element.title
                  node.fatherCode = element.fatherCode
                  node.rootCode = element.rootCode
                  node.deep = element.deep
                  node.seq = element.seq
                  node.url = element.url
                  node.viewPath = element.viewPath
                  node.icon = element.icon
                  node.state = element.state
                  node.state_str = getMenuStateDesc(node.state)
                  node.children = self.getSubMenus(node, menuArray)
                  self.treeData[0].children.push(node)
                }
              }
            }
          })
          .catch((err) => {
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
      },
      getSubMenus(node, menuArray) {
        let subArray = []
        if (menuArray != null && menuArray.length > 0) {
          for (let index = 0; index < menuArray.length; index++) {
            const element = menuArray[index];
            if (node.menuCode == element.fatherCode) {
              let item = {}
              item.id = element.id
              item.menuCode = element.menuCode
              item.title = element.title
              item.fatherCode = element.fatherCode
              item.rootCode = element.rootCode
              item.deep = element.deep
              item.seq = element.seq
              item.url = element.url
              item.viewPath = element.viewPath
              item.icon = element.icon
              item.state = element.state
              item.state_str = getMenuStateDesc(node.state)
              item.children = this.getSubMenus(item, menuArray)
              subArray.push(item)
            }
          }
        }
        return subArray
      },
      selectOne(data) {
        this.clickRow = data
      },
      showAdd(data) {
        this.clickRow = data
        if (data.deep == -1) {
          //增加根菜单
          this.addInfo = {
            deep: 0
          }
        } else {
          //增加子菜单
          this.addInfo = {
            rootCode: data.rootCode,
            fatherCode: data.menuCode,
            deep: 1
          }
        }
        this.addFormVisible = true
      },
      showUpdate(data) {
        this.clickRow = data
        this.updateFormVisible = true
      },
      delete(data) {
        this.clickRow = data
        let self = this
        this.$Modal.confirm({
          "title": "提醒",
          "content": "是否删除菜单[" + data.title + "]?",
          "onOk": () => {
            let params = {
              menuCode: data.menuCode
            }
            deleteMenu(params)
              .then(response => {
                self.init()
                self.$Message.success({
                  content: '删除菜单成功'
                })
              })
              .catch((err) => {
                self.$Message.error({
                  content: err,
                  duration: 10,
                  closable: true
                })
              })
          },
          "onCancel": () => {
            self.$Message.success({
              content: '取消删除'
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
</style>
